<div class="d-flex justify-content-between">
  <nz-input-group style="width: 250px" class="mb-3" [nzSuffix]="suffixIconSearch">
    <input type="text" nz-input placeholder="Search by name" [(ngModel)]="searchText"/>
  </nz-input-group>
  <ng-template #suffixIconSearch>
    <span nz-icon [nzType]="'search'"></span>
  </ng-template>

  <nz-form-item class="d-flex align-items-center">
    <nz-form-label>Group by:&nbsp;</nz-form-label>
    <nz-form-control>
      <nz-select [(ngModel)]="groupBy" (ngModelChange)="onGroupByChange()">
        <nz-option *ngFor="let item of groupByOptions" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
</div>

<nz-skeleton [nzLoading]="loading" [nzActive]="true" class="d-block">
  <nz-collapse nzGhost>
    <nz-collapse-panel *ngFor="let group of groups trackBy: trackByGroup" [nzHeader]="groupNameTemplate">
      <nz-table [nzSize]="'small'" [nzData]="group.tasks | searchByName: searchText" [nzShowPagination]="true"
                [nzHideOnSinglePage]="true"
                [nzScroll]="{ x: '300px' }" #memberTable>
        <thead>
        <tr>
          <th nzLeft [nzWidth]="'300px'">Task</th>
          <th *ngIf="!isGroupByStatus()" [nzWidth]="'120px'">Status</th>
          <th *ngIf="!isGroupByPriority()" [nzWidth]="'120px'">Priority</th>
          <th *ngIf="!isGroupByPhase()" [nzWidth]="'150px'">Phase</th>
          <th [nzWidth]="'120px'">Due Date</th>
          <th [nzWidth]="'120px'">Completed On</th>
          <th [nzWidth]="'120px'" class="text-center">Days Overdue</th>
          <th [nzWidth]="'120px'" class="text-center">Estimated Time</th>
          <th [nzWidth]="'120px'" class="text-center">Logged Time</th>
          <th [nzWidth]="'180px'" class="text-center">Overlogged Time</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of memberTable.data trackBy: trackByTask" class="cursor-pointer">
          <td (click)="openTask(data)" nzLeft style="z-index: 11">
            <small *ngIf="data.parent_task_id" nz-typography [nzType]="'secondary'">
              <span nz-icon [nzType]="'double-right'" [nzTheme]="'outline'"></span>
            </small>
            {{ data.name }}
          </td>
          <td *ngIf="!isGroupByStatus()">
            <nz-tag [nzColor]="data.status_color">{{ data.status_name }}</nz-tag>
          </td>
          <td *ngIf="!isGroupByPriority()">
            <nz-tag [nzColor]="data.priority_color">{{ data.priority_name }}</nz-tag>
          </td>
          <td *ngIf="!isGroupByPhase()">
            <nz-tag *ngIf="data.phase_name" [nzColor]="data.phase_color">{{ data.phase_name}}</nz-tag>
            <span *ngIf="!data.phase_name">-</span>
          </td>
          <td>{{ (data.end_date | date: 'MMM dd,yyyy') || '-'}}</td>
          <td>{{ (data.completed_at | date: 'MMM dd,yyyy') || '-'}}</td>
          <td class="text-center">{{ data.overdue_days || '-'}}</td>
          <td class="text-center">{{ data.total_time_string }}</td>
          <td class="text-center">{{ data.time_spent_string }}</td>
          <td class="text-center">{{ data.overlogged_time_string }}</td>
        </tr>
        </tbody>
      </nz-table>

      <ng-template #groupNameTemplate>
        <nz-badge class="mt-1" [nzColor]="group.color_code.slice(0, 7)"
                  [nzText]="group.name + ' (' + group.tasks.length + ')'"></nz-badge>
      </ng-template>
    </nz-collapse-panel>
  </nz-collapse>
</nz-skeleton>
